<template>
  <div class="p-3">
    <d-table
      ref="table"
      row-key="operId"
      :params="formData"
      :columns="columns"
      api="system/operlog/list"
      :selected-row-keys="selectedRowKeys"
      @select-change="rehandleSelectChange"
      @sort-change="sortChange"
      :hasColumnControl="false"
    >
      <template #topContent>
        <t-form class="table-form" :data="formData" layout="inline" @submit="getData">
          <t-form-item label="系统模块">
            <t-input v-model="formData.title" placeholder="请输入系统模块" clearable></t-input>
          </t-form-item>
          <t-form-item label="操作人员">
            <t-input v-model="formData.operName" placeholder="请输入操作人员" clearable></t-input>
          </t-form-item>
          <t-form-item label="类型">
            <t-select
              v-model="formData.businessType"
              placeholder="搜索状态"
              :options="operType"
              clearable
            >
            </t-select>
          </t-form-item>
          <t-form-item label="状态">
            <t-select
              v-model="formData.status"
              placeholder="搜索状态"
              :options="commonStatus"
              clearable
            >
            </t-select>
          </t-form-item>
          <t-form-item label="创建时间">
            <d-range-picker
              allow-input
              clearable
              v-model:beginTime="formData.beginTime"
              v-model:endTime="formData.endTime"
            />
          </t-form-item>
          <t-button type="submit">搜索</t-button>
          <t-popconfirm :content="'是否确认删除当前日志数据项？'" @confirm="handleDel">
            <t-button class="ml-2" :disabled="selectedRowKeys.length == 0" theme="danger"
              >删除</t-button
            >
          </t-popconfirm>
          <t-popconfirm :content="'是否确认清空所有操作日志数据项？'" @confirm="handleClean">
            <t-button class="ml-2" theme="danger">清空列表</t-button>
          </t-popconfirm>
          <!-- <t-button class="ml-2" theme="warning">导出</t-button> -->
          <!-- <t-dropdown :maxColumnWidth="120" :maxHeight="200" class="ml-8px">
            <t-button variant="text">
              更多操作
            </t-button>
            <t-dropdown-menu>
              <t-dropdown-item class="w-100px">
                <d-pop-btn class="ml-2" tips="是否确认删除该部门？" @click="handleDel(row)">删除</d-pop-btn>
              </t-dropdown-item>
              <t-dropdown-item class="w-100px" @click="handleClean">清空</t-dropdown-item>
              <t-dropdown-item class="w-100px" @click="handleExport">导出</t-dropdown-item>
            </t-dropdown-menu>
          </t-dropdown> -->
        </t-form>
      </template>
      <template #businessType="{ row }">
        <t-tag v-if="[1, 2, 0].includes(row.businessType)" size="small" variant="light">
          {{ operType.find((e) => e.value == row.businessType)?.label }}
        </t-tag>
        <t-tag
          v-if="[3, 7, 9].includes(row.businessType)"
          size="small"
          variant="light"
          theme="danger"
        >
          {{ operType.find((e) => e.value == row.businessType)?.label }}
        </t-tag>
        <t-tag
          v-if="[4, 5, 6, 8].includes(row.businessType)"
          size="small"
          variant="light"
          theme="warning"
        >
          {{ operType.find((e) => e.value == row.businessType)?.label }}
        </t-tag>
      </template>
      <template #operation="{ row }">
        <t-link theme="primary" hover="color" @click="handleDetail(row)">详细</t-link>
      </template>
    </d-table>
    <detail ref="dialog" @success="getData" />
  </div>
</template>

<script setup lang="jsx">
import detail from './detail.vue'
import { ref, computed } from 'vue'
import { del } from '@common'
import { useDict } from '@/store/dict'
import { MessagePlugin } from 'tdesign-vue-next'
const table = ref(null)
const formData = ref({})
const dialog = ref(false)
const selectedRowKeys = ref([])

const dict = useDict()

const operType = computed(() => {
  return dict.dict_oper_type
})
const commonStatus = computed(() => {
  return dict.dict_success_list
})
const columns = computed(() => {
  return [
    { colKey: 'row-select', type: 'multiple', fixed: 'left', width: 60 },
    { title: '日志编号', colKey: 'operId', width: 80 },
    { title: '系统模块', colKey: 'title', width: 140, ellipsis: true },
    { title: '操作类型', colKey: 'businessType', width: 100, ellipsis: true },
    { title: '请求方式', colKey: 'requestMethod', width: 80 },
    {
      title: '操作人员',
      colKey: 'operName',
      width: 110,
      ellipsis: true
      // sortType: 'all',
      // sorter: true
    },
    { title: '主机', colKey: 'operIp', width: 140 },
    {
      title: '操作状态',
      colKey: 'status',
      width: 80,
      cell: (_, { row }) => {
        const { status } = row
        return <d-status list={commonStatus.value} value={status} />
      }
    },
    {
      title: '操作日期',
      colKey: 'operTime',
      width: 170
      // sortType: 'all',
      // sorter: true
    },
    {
      title: '消耗时间',
      colKey: 'costTime',
      width: 80,
      // sortType: 'all',
      // sorter: true,
      cell: (_, { row }) => {
        const { costTime } = row
        return costTime + '毫秒'
      }
    },
    { title: '操作', colKey: 'operation', width: 100, fixed: 'right' }
  ]
})
const getData = async () => {
  table.value.getData()
}
const handleDetail = (row) => {
  dialog.value.show(row)
}
const handleDel = async () => {
  const key = selectedRowKeys.value.join(',')
  await del(`system/operlog/${key}`)
  MessagePlugin.success('删除成功')
  selectedRowKeys.value = []
  getData()
}
const handleClean = async () => {
  await del(`system/operlog/clean`)
  MessagePlugin.success('操作成功')
  getData()
}
// const handleExport = async () => {
//   await post(`system/operlog/export`, formData.value)
// }
const rehandleSelectChange = (value) => {
  selectedRowKeys.value = value
}
const sortChange = (sort) => {
  formData.value = {
    ...formData.value,
    orderByColumn: sort.sortBy,
    isAsc: sort.descending ? 'descending' : 'ascending'
  }
}
dict.getSysOperType()
</script>
